<template>
  <div class="topic">
    <h2>专题</h2>
    <!-- <van-pull-refresh v-model="loading" @refresh="onRefresh"> -->
    <!-- load 滚动条与底部距离小于 offset 时触发 -->
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <!-- <van-pull-refresh v-model="refreshing" @refresh="onRefresh"> -->
      <van-list v-model:loading="loading" :finished="finished" class="topic-c" finished-text="没有更多了" @load="onLoad">
        <van-cell v-for="item in list" :key="item.id" @click="handleClick(item.id)">
          <img :src="item.scene_pic_url" alt="" />
          <div>
            <div class="text">{{ item.title }}</div>
            <div class="text">{{ item.subtitle }}</div>
            <div class="text">{{ item.price_info }}元起</div>
          </div>
        </van-cell>
      </van-list>
    </van-pull-refresh>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { showToast } from 'vant'
import { useRouter } from 'vue-router'
import { listaction } from '@/api/topic'
const router = useRouter()
const list = ref([])
const count = ref(1)
const loading = ref(false)
const finished = ref(false)
const refreshing = ref(false)

const onLoad = () => {
  if (refreshing.value) {
    list.value = []
    refreshing.value = false
  }
  listaction({
    page: count.value
  }).then(res => {
    console.log(res)
    // list.value = res.data
    list.value.push(...res.data)
    // 数据请求完毕,手动把loading变为false
    loading.value = false
    count.value++
    // eslint-disable-next-line eqeqeq
    if (res.page == res.total) {
      finished.value = true
    }
  })
}
// const onRefresh = () => {
//   // 清空列表数据
//   finished.value = false
//   // 重新加载数据
//   // 将 loading 设置为 true，表示处于加载状态
//   loading.value = true
//   onLoad()
// }
const onRefresh = () => {
  setTimeout(() => {
    showToast('刷新成功')
    refreshing.value = false
    // onLoad()
  }, 1000)
}
const handleClick = (id) => {
  router.push({
    name: 'topicDetail',
    query: {
      id: id
    }
  })
}
</script>
<script>
export default {
  name: 'topicView'
}
</script>

<style lang="scss" scoped>
.topic {
  text-align: center;
  padding-bottom: 100px;

  .topic-c {
    text-align: center;

    img {
      width: 710px;
      height: 343px;
      margin: 0 auto;
    }
    .text {
      text-align: center;
      color: #000;
    }
  }
}
</style>
